<template>
	<view class="wrap" :style="colorStyle">
		<view class="card">
			<view class="sub_title flex_c">
				<view class="icon_box">
					<image :src="HTTP_REQUEST_URL+'/uniapp/logoBg.png'" mode="widthFix"></image>
				</view>
			</view>

			<view class="price_box">
				<view class="text1">
					当前可提现金额
				</view>
				<view class="text2">
					{{userInfo.now_money||0}}
				</view>
				<view class="text1" v-if="userInfo.charge">
					提现手续费{{userInfo.charge||0}}%
				</view>
			</view>

			<view class="form_box">
				<view class="form_main">

					<view class="form_item flex_sb">
						<view class="left">
							提现方式
						</view>
						<view class="right flex_ce">
							<view class="check_box flex_s" :class="{active:tabCurrent==index}"
								v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">
								<view class="check_icon"></view>
								<text>{{item.label}}</text>
							</view>
						</view>
					</view>
					<view class="form_item flex_sb">
						<view class="left">
							提现金额
						</view>
						<view class="right">
							<input type="digit" class="input_class" placeholder="请输入" @input="checkDot"
								:maxlength="inputMaxlength" v-model="paramInfo.extract_price" />
						</view>
						<view class="all-btn" @click="handleAll" 
						v-if="Number(userInfo.now_money) && Number(paramInfo.extract_price) < Number(userInfo.now_money)">全部</view>
					</view>
					<template v-if="tabList[tabCurrent].id=='alipay'">
						<!-- <view class="form_item">
							<view class="name">
								支付宝收款码
							</view>
							<view class="value">
								<view class="li" v-if="paramInfo.qrcode_url">
									<view class="close_icon flex_c" @click="delImg(index)">
										<text class="iconfont icon-guanbi"></text>
									</view>
									<image :src="paramInfo.qrcode_url"></image>
								</view>
								<view class="li" v-else @click="upLoadOneImg">
									<image src="../static/imgs/up.png"></image>
								</view>

							</view>
						</view> -->
						<view class="form_item flex_sb">
							<view class="left">
								支付宝账号
							</view>
							<view class="right flex_s"
								@click="$util.goPage('/pages/new_page/bank/list?chooseAdd=true&headIndex=0')">
								<view class="input_box">
									<input type="text" disabled class="input_class" v-model="paramInfo.alipay_number"
										placeholder="请选择支付宝账号" />
								</view>
						
								<view class="iconfont icon-xiangyou" style="font-size: 26rpx;margin-left: 10rpx;">
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="form_item flex_sb">
							<view class="left">
								银行卡
							</view>
							<view class="right flex_s"
								@click="$util.goPage('/pages/new_page/bank/list?chooseAdd=true&headIndex=1')">
								<view class="input_box">
									<input type="text" disabled class="input_class" v-model="paramInfo.bank_address"
										placeholder="请选择银行卡" />
								</view>

								<view class="iconfont icon-xiangyou" style="font-size: 26rpx;margin-left: 10rpx;">
								</view>
							</view>
						</view>
					</template>

				</view>
			</view>
			<view class="btn_box">
				<view class="btn btn1" @click="sureUp">
					确认提交
				</view>
			</view>
		</view>
		<modalVue ref="modalVue" content="您还未绑定手机号,是否前往绑定？" confirmText="去绑定" @confirm="goLogin"></modalVue>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	import {
		toLogin
	} from "@/libs/login.js";
	import colors from "@/mixins/color";
	import modalVue from '@/components/modal/modal.vue';
	import {
		debounceImmediate
	} from "@/utils/validate";
	import {
		cash,
		balance_detail,
		card_default
	} from "@/api/new_api.js"
	export default {
		components: {
			modalVue
		},
		mixins: [colors],
		data() {
			return {
				HTTP_REQUEST_URL,
				tabCurrent: 0,
				tabList: [
					// {
					// 	label: '支付宝',
					// 	id: 'alipay'
					// }, 
					{
						label: '银行卡',
						id: 'bank'
					}
					// ,{
					// 	label: '微信',
					// 	id:'weixin'
					// },
				],
				userInfo: {},
				paramInfo: {
					alipay_name: '',
					alipay_number: '',
					extract_type: 'bank', //'bank = 银行卡 alipay = 支付宝weixin=微信'
					extract_price: '', //提现金额
					qrcode_url: '', //二维码图片
					real_name: '', //持卡人
					bank_code: '', //卡号
					bank_address: '' //银行名称
				},
				inputMaxlength:10,
			};
		},
		computed: {},
		onLoad() {
			this.balance_detail() //获取余额
			if (this.$Cache.get('qrcode_url')) {
				this.paramInfo.qrcode_url = this.$Cache.get('qrcode_url')
			}
			// if (this.$Cache.get('bankInfo')) {
			// 	const data = JSON.parse(this.$Cache.get('bankInfo'))
			// 	this.paramInfo.name = data.name
			// 	this.paramInfo.card = data.card
			// 	this.paramInfo.bank_name = data.bank_name
			// }
			this.card_default()
			uni.$on('choosAddrss', (val) => {
				if(val.alipay_name) {
					this.paramInfo.alipay_name = val.alipay_name
					this.paramInfo.alipay_number = val.alipay_number
					console.log(val, "选择的支付宝");
				}else {
					
					this.paramInfo.bank_address = val.bank_name
					this.paramInfo.bank_code = val.card_number
					this.paramInfo.real_name = val.card_username
					console.log(val, "选择的银行");
				}
			})
		},
		methods: {
			handleAll() {
				this.paramInfo.extract_price = this.userInfo.now_money
			},
			/**
			 * 限制数字输入框小数点后两位
			 * @param {Object} e 输入的数字
			 */
			checkNum(e) {
				var promise = new Promise((resolve, reject) => {
					let value = e.detail.value;
					let dot = value.indexOf('.'); //包含小数点
					let reg = /^[0-9]+$/; //正整数
					// 存在小数点
					if (dot > -1) {
						if (value.indexOf(".") == 0) {
							//'首位小数点情况'
							value = value.replace(/[^$#$]/g, "0.");
							value = value.replace(/\.{2,}/g, ".");
						} else if (!(/^(\d?)+(\.\d{0,2})?$/.test(value))) {
							// 多个小数点情况
							value = value.substring(0, value.length - 1)
						}
			
						this.inputMaxlength = dot + 3; //长度是小数点后两位
					} else {
						this.inputMaxlength = 10
					}
					resolve(value)
			
				})
			
				return promise
			
			},
			goLogin(){
				toLogin()
			},
			card_default() {
				card_default().then((res) => {
					const data = res.data
					if (data.bank_name) {
						this.paramInfo.bank_address = data.bank_name
						this.paramInfo.bank_code = data.card_number
						this.paramInfo.real_name = data.card_username
					}
				})
			},
			checkDot(e) {
				let that=this
				this.checkNum(e).then((value) => {
					console.log(value,"aa");
					this.$nextTick(()=> {
						that.paramInfo.extract_price = value
					})
				})
			},
			delImg(index) {
				this.paramInfo.qrcode_url = ''
			},
			upLoadOneImg() {
				this.$util.uploadImageOne('upload/image', (res) => {
					const data = res.data
					this.paramInfo.qrcode_url = data.url
				}, (err) => {
					console.log(err, "失败");
				})
			},

			sureUp() {
				let USER_INFO = JSON.parse(this.$Cache.get('USER_INFO'))
				if (!USER_INFO.phone) {
					this.$refs.modalVue.open()
					return
				}
				if (!this.paramInfo.extract_price) {
					this.$util.Tips({title:'请输入提现金额'})
					return
				}
				if (this.tabList[this.tabCurrent].id == 'bank') {
					if (!this.paramInfo.bank_address) {
						this.$util.Tips({
							title: '请选择银行卡'
						})
						return
					}
				} else {
					// 支付宝
					if (!this.paramInfo.alipay_number) {
						this.$util.Tips({
							title: '请选择支付宝账号'
						})
						return
					}

				}

				this.cash_balance()


			},
			cash_balance: debounceImmediate(function() {
				this.paramInfo.extract_type = this.tabList[this.tabCurrent].id
				cash(this.paramInfo).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none",
						success() {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/new_page/user/balance?tabCurrent=1'
								})
							}, 500)

						}
					})
				})
			}, 1000),
			changeTab(index) {
				this.tabCurrent = index
				this.paramInfo.extract_type = this.tabList[index].id
			},
			balance_detail() {
				balance_detail({uid:uni.getStorageSync('UID')}).then((res) => {
					this.userInfo = res.data
				}).catch((err) => {

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.all-btn {
		font-size: 24rpx;
		padding-left: 20rpx;
		color: #4891f1;
	}
	.wrap {
		padding-top: 50rpx;

		.card {
			width: 690rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin: 0 auto 23rpx;
			padding-bottom: 30rpx;

			.btn_box {
				margin-top: 50rpx;

				.btn {
					width: 600rpx;
					height: 89rpx;
					border-radius: 89rpx;
					margin: 0 auto;
					line-height: 89rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 700;
				}

				.btn1 {
					background: var(--view-theme);
					color: #fff;
				}
			}

			.form_box {
				width: 604rpx;
				margin: 0 auto;
				color: #3B3A39;

				.form_title {
					font-size: 30rpx;
					font-weight: 700;
					text-align: center;

					margin-bottom: 25rpx;
				}

				.form_main {
					display: grid;
					grid-row-gap: 12rpx;

					.form_item {
						width: 604rpx;
						min-height: 80rpx;
						border-radius: 10rpx;
						background: #F6F6F6;
						font-size: 28rpx;
						padding: 20rpx 20rpx 20rpx 30rpx;

						.name {
							width: 100%;
						}

						.value {
							width: 100%;
							overflow: hidden;

							.li {
								position: relative;
								width: 108rpx;
								height: 108rpx;
								border-radius: 8rpx;
								overflow: hidden;
								display: inline-block;
								vertical-align: top;
								margin: 20rpx 20rpx 0 0;

								image {
									width: 100%;
									height: 108rpx;
									display: inline-block;
									vertical-align: top;
								}

								.close_icon {
									position: absolute;
									right: 0;
									top: 0;
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									overflow: hidden;
									background: var(--view-theme);

									.iconfont {
										color: #fff;
										font-size: 18rpx;
									}
								}
							}
						}

						.left {}

						.right {
							margin-left: 10rpx;
							flex-grow: 1;

							.input_box {
								margin-left: auto;
							}

							.input_class {
								text-align: right;
							}

							.active {
								opacity: 1 !important;

								.check_icon {
									border: 10rpx solid #000000 !important;
								}
							}

							.check_box {
								opacity: .4;
								margin-left: 26rpx;

								.check_icon {
									width: 30rpx;
									height: 30rpx;
									border-radius: 50%;
									overflow: hidden;
									border: 3rpx solid #CCCCCC;
									margin-right: 12rpx;
								}

							}
						}



					}
				}

			}





			.title {
				height: 113rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				background: #F6F6F6;
				font-size: 30rpx;
				font-weight: 700;
				color: #3B3A39;
				padding-left: 27rpx;
			}

			.tip_box {

				color: #3B3A39;
				font-size: 26rpx;
				line-height: 60rpx;
			}

			.price_box {
				text-align: center;
				font-size: 28rpx;
				color: #3B3A39;
				margin-bottom: 35rpx;

				.text2 {
					font-size: 80rpx;
					font-weight: 700;
					margin: 10rpx 0;
				}
			}



			.sub_title {
				height: 70rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				margin-bottom: 70rpx;
				padding-left: 27rpx;
				font-size: 26rpx;
				color: #3B3A39;
				background: linear-gradient(90deg, #F2E2AE 0%, #F9F4E5 47.92%, #EDDEB1 100%);

				.icon_box {
					width: 222rpx;
					height: 60rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>